Component({
  properties: {
    // 每页显示条目个数
    pageSize: {
      type: Number,
      default: 10
    },
    // 总数目
    total: {
      type: Number,
      default: 0
    },
    // 激活
    nowPage: {
      type: Number,
      default: 1
    },
  },

  options: {
    styleIsolation: "apply-shared"
  },

  data: {
    showArrowRight: true,
    showArrowLeft: true,
    num: 0,
    laveLeftPage: [],
    laveRightPage: []
  },
  observers: {
    'total, pageSize': function (total, pageSize) {
      this.filling();
    },
  },
  ready() {
    console.log('total', this.data.total);
    console.log('nowPage', this.data.nowPage);
    console.log('pageSize', this.data.pageSize);
  },

  /**
  
     * 组件的方法列表
  
     */
  methods: {
    filling() {
      // 总页数
      let num = Math.ceil(this.data.total / this.data.pageSize);
      this.setData({
        num,
      })
    },
    // 隐藏剩余页数
    hideLave() {
      this.setData({
        laveLeftPageShow: false,
        laveRightPageShow: false
      })
    },
    // 页码被选中
    click(event) {
      let page = event.currentTarget.dataset.index;
      console.log('page',page);
      if (this.data.nowPage == page) {
        return;
      }
      this.setData({
        nowPage: page
      })
      this.autoAhowArrow(page);
    },
    // 下一页

    arrowright(event) {
      let page = event.currentTarget.dataset.index;
      if (page < this.data.num) {
        let nowPage = page + 1;
        this.autoAhowArrow(nowPage);
      }
    },
    // 上一页
    arrowleft(event) {
      let page = event.currentTarget.dataset.index;
      if (page > 1) {
        let nowPage = page - 1;
        this.autoAhowArrow(nowPage);
      }
    },
    // 自动显示左右箭头
    autoAhowArrow(nowPage) {
      if (nowPage <= 1) {
        this.setData({
          showArrowLeft: false,
          showArrowRight: true
        })
      } else if (nowPage >= this.data.num) {
        this.setData({
          showArrowLeft: true,
          showArrowRight: false,
        })
      } else {
        this.setData({
          showArrowLeft: true,
          showArrowRight: true,
        })
      }
      this.triggerEvent("pageChanged", {
        page: nowPage
      })
      this.hideLave();
    }
  }
})